<template>
<div class="chain_all">
  <div class="chain_title">本地重点产业</div>
  <div class="flex_w">
    <div class="item_chain" v-for="(item,index) in chainList" :key='index' @click="toOpen(item)">
      <img class="chain_img" :src="item.chain_img" alt="">
      <div class="chain_name">{{item.chain_name}}</div>
    </div>
  </div>
  <div class="zhan"></div>
  <tabbar-div current="1" />
</div>
</template>
<script>
import tabbarDiv from '@/components/tabber.vue'
import {myIndustrychain} from '@/api/api'
export default {
  data(){
    return{
      chainList:[]
    }
  },
  components:{tabbarDiv},
  created(){
    if(localStorage.allChain){
      this.chainList = JSON.parse(localStorage.allChain)
    }else{
      myIndustrychain({id:localStorage.IndexId}).then(res=>{
        this.chainList = res.data
        localStorage.allChain = JSON.stringify(this.chainList)
      })
    }
    console.log(this.chainList)
  },
  methods:{
    toOpen(item){
      myIndustrychain({chain_id:item.id}).then(res=>{
        item.children=res.data	
        this.$router.push({name:'chainDetail',query:{chain:JSON.stringify(item)}})
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.chain_title{
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 10px;
}
.zhan{
  width: 100%;
  height: 80px;
}
.chain_all{
  width: 100%;
  .item_chain{
    width: calc(50% - 16px);
    margin: 8px;
    height: 90px;
    position: relative;
    .chain_img{
      width: 100%;
      height: 90px;
      border-radius: 6px;
      object-fit: cover;
    }
  }
  .chain_name{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
    line-height: 28px;
    background: rgba($color: #000000, $alpha: .4);
    color: #fff;
    border-radius: 0 0 6px 6px;
    padding-left: 10px;
    font-size: 16px;
  }
}
</style>